<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Convex Hull</title>
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <style type="text/css">

svg {
  border: solid 1px #aaa;
  background: #eee;
}

path {
  fill: lightsteelblue;
  stroke: #000;
}

circle {
  fill: #fff;
  stroke: #000;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var width = 960,
    height = 500;

var vertices = d3.range(15).map(function(d) {
  return [
    width / 4 + Math.random() * width / 2,
    height / 4 + Math.random() * height / 2
  ];
});

var svg = d3.select("body")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("pointer-events", "all")
    .on("mousemove", move)
    .on("click", click);

update();

function update() {
  svg.selectAll("path")
      .data([d3.geom.hull(vertices)])
      .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
	  .enter().append("path")
	    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

  svg.selectAll("circle")
      .data(vertices.slice(1))
    .enter().append("circle")
      .attr("transform", function(d) { return "translate(" + d + ")"; })
      .attr("r", 3);
}

function move() {
  vertices[0] = d3.mouse(this);
  update();
}

function click() {
  vertices.push(d3.mouse(this));
  update();
}
    </script>
  </body>
</html>
